import React, { useEffect, useState } from "react";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import styles from "./index.module.css";
import { Select, Avatar } from "antd";
import { erjily } from "../../router/router";
import { Outlet, useNavigate } from "react-router-dom";
const { Header, Content, Footer } = Layout;
function Index() {
  const [img, setimg] = useState(localStorage.getItem("url"));
  const [name, setname] = useState(localStorage.getItem("username"));
  const [zhuti, setzhuti] = useState(false);
  const [yuyan, setyuyan] = useState("pink");
  const nav = useNavigate();
  // const items = Array.from({ length: 5 }).map((_, index) => ({
  //   key: index + 1,
  //   label: `nav ${index + 1}`,
  // }));
  const ly = (err) => {
    if (zhuti == false) {
      return err.map((it) => {
        return {
          label: it.title,
          key: it.path,
        };
      });
    } else {
      return err.map((it) => {
        return {
          label: it.en,
          key: it.path,
        };
      });
    }
  };
  const items = ly(erjily);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const handleChange = (value: string) => {
    setzhuti(value);
  };
  const dianji = () => {
    setyuyan("dark");
    // console.log(yuyan)
  };
  return (
    <div className={styles.box}>
      <div className={styles.aaa}>
        <button onClick={dianji}>点击切换主题</button>
      </div>
      <div className={styles.bbb}>
        <Select
          defaultValue="中文"
          style={{ width: 80 }}
          onChange={handleChange}
          options={[
            { value: true, label: "英文" },
            { value: false, label: "中文" },
          ]}
        />
      </div>

      <Layout>
        <Header
          style={{
            display: "flex",
            alignItems: "center",
            backgroundColor: yuyan,
          }}
        >
          <div className="demo-logo">
            <Avatar src={img} />
            {name}
          </div>
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={["2"]}
            items={items}
            style={{
              flex: 1,
              minWidth: 0,
              backgroundColor: yuyan,
              color: "dark",
            }}
            className="bg-red-200
            w-[930px]
            h-[64px]
            dark:bg-red-600
            dark:w-[930px]
            dark:h-[64px]
            "
            onClick={({ key }) => nav(key)}
          />
        </Header>
        <Content style={{ padding: "0 48px" }}>
          <Breadcrumb
            style={{ margin: "16px 0" }}
            items={[{ title: "Home" }, { title: "List" }, { title: "App" }]}
          />
          <div
            style={{
              background: colorBgContainer,
              minHeight: 750,
              padding: 24,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer style={{ textAlign: "center" }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </div>
  );
}

export default Index;
